<template>
    <div class="line">
        <div id="line" :style="{ width: '300px', height: '200px' }"></div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";
let myEcharts = echarts;
onMounted(() => {
    initChart();
});
onUnmounted(() => {
    myEcharts.dispose;
});
function initChart() {
    let chart = myEcharts.init(document.getElementById("line"), "purple-passion");
    chart.setOption({
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [
                    120,
                    {
                        value: 200,
                        itemStyle: {
                            color: '#a90000'
                        }
                    },
                    150,
                    80,
                    70,
                    110,
                    130
                ],
                type: 'bar'
            }
        ]
    });
    window.onresize = function () {
        chart.resize();
    };
}
</script>

<style lang="scss" scoped>
.line {
    width: 300px;
    height: 200px;
    background: #ffffff;
}
</style>
